<!--  -->
<template>
  <div class="icons">
    <swiper :options="swiperOptions" class="header-swiper" ref="mySwiper">
        <swiper-slide v-for="(item,index) in swiperItems" :key="index">
            <div class="icons">
                    <div v-for="subItem in item" :key="subItem.id" class="icons_items">
                        <img :src="subItem.src" alt="" class="bgc_icons">
                        <p>{{subItem.name}}</p>
                    </div>
            </div>
        </swiper-slide>
        <!-- swiper分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>    
</template>

<script>

export default {
  data () {
    return {
        iconUrl: [
            {
                id:1,
                src:'image/swiperIcons/icon1.PNG',
                name:"旅游景点"
            },
           {
               id:2,
               src:'image/swiperIcons/icon1.PNG',
               name:"美食周边"
           },
           {
               id:3,
               src:'image/swiperIcons/icon1.PNG',
               name:"居家萝莉"
           },
           {
               id:4,
               src:'image/swiperIcons/icon1.PNG',
               name:"欧美风情"
           },
           {
               id:5,
               src:'image/swiperIcons/icon1.PNG',
               name:"旅游景点"
           },
           {
               id:6,
               src:'image/swiperIcons/icon1.PNG',
               name:"旅游景点"
           },
           {
               id:7,
               src:'image/swiperIcons/icon1.PNG',
               name:"旅游景点"
           },
           {
               id:8,
               src:'image/swiperIcons/icon1.PNG',
               name:"旅游景点"
           },
           {
               id:9,
               src:'image/swiperIcons/icon1.PNG',
               name:"旅游景点"
           },
           {
               id:10,
               src:'image/swiperIcons/icon1.PNG',
               name:"旅游景点"
           },
        ],
         swiperOptions:{
           pagination: {
            el: '.swiper-pagination'//分页器配置
          },
          loop: true//设置为可轮播
        }
    };
  },
  computed: {
    //用于计算swiper控件的个数，相对于iconUrl
    swiperItems() {
        var arr = []
        this.iconUrl.map((item, index) => {
            let idx = Math.floor(index/8)
            if(!arr[idx]) arr[idx] = []
            arr[idx].push(item)
        })
        return arr
    }
  }

}

</script>
<style lang='less' scoped>
.header-swiper{
    height: 3.6rem;
}
.icons{
    width: 100%;
    height: 3rem;
    // display: flex;
    // flex-wrap: wrap;
    .icons_items{
        width: 25%;
        font-size: 0.26rem;
        height: 1.5rem;
        padding: 0.2rem 0.4rem;
        box-sizing: border-box;//不会撑大盒子大小
        float: left;
        .bgc_icons{
            width: 80%;
            height: 75%;
            border-radius: 50%;
        }
        p{
            margin-top: .15rem;
        }
    }
}
.swiper-pagination{
    top: 2.3rem !important;
}
.icons{
    background-color: #fff;
}
</style>